<script setup lang="ts">
import { ref, reactive } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const formData = reactive([
    {
        id:1,
        name:"专业建设",
        list:["国家级一流本科专业建设点","省级一流本科专业建设点"]
    },
    {
        id:2,
        name:"课程建设",
        list:["国家级一流课程建设","省级一流课程建设"]
    },
    {
        id:3,
        name:"教改项目",
        list:["省级教改项目","校级教改项目（或培育）"]
    },
    {
        id:4,
        name:"教学成果奖",
        list:["国家级教学成果奖","省级教学成果奖"]
    },
    {
        id:5,
        name:"教师获奖",
        list:["国家级教学比赛","省级教学比赛"]
    },
    {
        id:6,
        name:"教学团队或平台",
        list:["国家级教学团队或平台","省级教学团队或平台"]
    },
    {
        id:7,
        name:"其它教学研究",
        list:["其他教学团队或平台","其他教学研究"]
    }
])

</script>

<template>
    <div class="banxin">
        <el-menu
        background-color="#528adc"
        text-color="#fff"
         class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        v-for="(item,index) in formData"
    >
        <el-sub-menu  :index="index + ''">
            <template #title>{{item.name}}</template>
             <el-menu-item v-for="(item1,index1) in item.list" index="index1 + ''">{{item1}}</el-menu-item>
        </el-sub-menu>
    </el-menu>
    </div>
</template>

<style scoped>
.banxin{
    width: 1200px;
    font-size: 15px;
    margin: auto;
    display: flex;
    justify-content: center;
}


</style>
